<!DOCTYPE>
<html>
<head>
<title>Q.Table | Q.js</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 使用QLib控件是必须包含样式表 -->
  <link type="text/css" rel="stylesheet" href="../ui.css" />
  <!--  
  提示：src="{QLib目录}/Q.js" 
  根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
  -->
  <script type="text/javascript" src="../Q.js"></script>
  <script type="text/javascript" src="../utils/stl.js"></script>
  <script type="text/javascript" src="../ui/table.js"></script>
  <script>
  <!--
  var g_table = null;
  Q.ready(function() {
    var columns = [
    { name: 'url', title: '地址', align:'left', width: 540, isHTML: true, renderer : function(record) {return record['url'];}, },
    { name: 'date', title: '日期', align:'left', width: 140, isHTML: true, renderer : function(record) {return record['date'];}, }
    ];
    
    var store = new Q.Store({
      data: [
        {url: 'abc', date: '2014-12-11'},
        {url: 'abc1', date: '2014-12-11'},
        {url: 'abc2', date: '2014-12-11'},
        {url: 'abc3', date: '2014-12-11'},
        {url: 'abc4', date: '2014-12-11'},
        {url: 'abc5', date: '2014-12-11'},
        {url: 'abc6', date: '2014-12-11'},
        {url: 'abc7', date: '2014-12-11'},
        {url: 'abc8', date: '2014-12-11'},
        {url: 'abc9', date: '2014-12-11'},
        {url: 'abc10', date: '2014-12-11'},
        {url: 'abc11', date: '2014-12-11'},
        {url: 'abc12', date: '2014-12-11'},
        {url: 'abc13', date: '2014-12-11'},
        {url: 'abc14', date: '2014-12-11'},
        {url: 'abc15', date: '2014-12-11'},
        {url: 'abc16', date: '2014-12-11'},
        {url: 'abc17', date: '2014-12-11'},
        {url: 'abc18', date: '2014-12-11'}
      ] 
    });
    //init Q.table
    g_table = new Q.Table({ 
      id: Q.$('table_container'),
      title: "Q.Table标题栏",
      wstyle: "q-attr-border q-attr-toolbar q-attr-title",
      columns: columns,  
      store: store,
      row_onclick : function(row) {
        var data = this.getRecord(row);
        Q.$('show_text').innerText = "当前选中: " + data.url;
      }
    });

    Q.$('clear').onclick = function() {
      g_table.clear();
    }


  });
  -->
  </script>
</head>
<body onselectstart="return false;" style="height: auto;overflow:hidden;-moz-user-select:none;-webkit-user-select: none;">
<br/>
<p>Q.Table示例</p>
<hr>
<br>
<button id="clear"> 清空数据 </button> &nbsp;<span id="show_text"></span>
<br>
<br>
<div id="table_container" style="width: 800px; height: 400px; position:relative;background-color:#99bbe8;"></div>

</body>
</html>
